<template>
  <div class="Recomments-container">
    <div v-if="type == 'article'">
      <el-card class="Recomments" shadow="never">
        <div slot="header" class="rank-title">文章浏览量排行</div>
        <div>
          <ArticleRanks :list="articleList" type="view" />
        </div>
      </el-card>
      <el-card class="Recomments" shadow="never">
        <div slot="header" class="rank-title">文章评论排行</div>
        <div>
          <ArticleRanks :list="commentList" type="view" />
        </div>
      </el-card>
      <el-card class="Recomments" shadow="never">
        <div slot="header" class="rank-title">文章点赞排行</div>
        <div>
          <ArticleRanks :list="thumbList" type="thumb" />
        </div>
      </el-card>
    </div>
    <div v-else-if="type == 'musicScore'">
      <el-card class="Recomments" shadow="never">
        <div slot="header" class="rank-title">乐谱浏览量排行</div>
        <div>
          <MusicScoreRanks :list="articleList" type="view" />
        </div>
      </el-card>
      <el-card class="Recomments" shadow="never">
        <div slot="header" class="rank-title">乐谱评论量排行</div>
        <div>
          <MusicScoreRanks :list="commentList" type="comment" />
        </div>
      </el-card>
      <el-card class="Recomments" shadow="never">
        <div slot="header" class="rank-title">乐谱点赞排行</div>
        <div>
          <MusicScoreRanks :list="thumbList" type="thumb" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  getArticleViewRankList,
  getArticleCommentRankList,
  getArticleThumbRankList
} from '@/mock/ranklist'

import ArticleRanks from '@/components/Article/ArticleRanks'
import MusicScoreRanks from '@/components/MusicScore/MusicScoreRanks'
export default {
  props: {
    type: {
      type: String,
      default: 'article'
    }
  },
  components: {
    ArticleRanks,
    MusicScoreRanks
  },
  data() {
    return {
      articleList: [],
      commentList: [],
      thumbList: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getArticleViewRankList()
      this.getArticleCommentRankList()
      this.getArticleThumbRankList()
    })
  },
  methods: {
    // 获取浏览量排行
    async getArticleViewRankList() {
      try {
        if (this.type == 'article') {
          const res = await this.$API.rank.getArticleViewList()
          console.log('ranklist', res)
          if (res.status == 200) {
            this.articleList = res.data
          } else {
            // this.$message.error('无法获取浏览量排行')
          }
        } else if (this.type == 'musicScore') {
          const res = await this.$API.rank.getMusicScoreViewList()
          console.log('ranklist', res)
          if (res.status == 200) {
            this.articleList = res.data
          } else {
            // this.$message.error('无法获取浏览量排行')
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 获取浏览量排行
    async getArticleCommentRankList() {
      if (this.type == 'article') {
        const res = await this.$API.rank.getArticleCommentList()
        console.log('ranklist', res)
        if (res.status == 200) {
          this.commentList = res.data
        } else {
          this.$message.error('无法获取评论排行')
        }
      } else if (this.type == 'musicScore') {
        const res = await this.$API.rank.getMusicScoreCommentList()
        console.log('ranklist', res)
        if (res.status == 200) {
          this.commentList = res.data
        } else {
          this.$message.error('无法获取浏览量排行')
        }
      }
    },
    // 获取浏览量排行
    async getArticleThumbRankList() {
      if (this.type == 'article') {
        const res = await this.$API.rank.getArticleThumbList()
        console.log('ranklist', res)
        if (res.status == 200) {
          this.thumbList = res.data
        } else {
          this.$message.error('无法获取点赞排行')
        }
      } else if (this.type == 'musicScore') {
        const res = await this.$API.rank.getMusicScoreThumbList()
        console.log('ranklist', res)
        if (res.status == 200) {
          this.thumbList = res.data
        } else {
          this.$message.error('无法获取点赞排行')
        }
      }
    }
  }
}
</script>

<style scoped>
.Recomments-container {
  width: 90%;
  overflow-x: hidden;
  margin-left: auto;
}
.Recomments {
  overflow-x: hidden;
  /* font-family: none; */
  margin-bottom: 20px;
}
/* .Recomments >>> .el-card__body,
.el-main {
  padding: 0px;
}
.el-card__body,
.el-main {
  padding: 0px;
} */
.rank-title {
  font-size: 14px;
  color: #888888;
}
</style>
